<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-费用疑问 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-modal-cost-inquiry" @click.stop>
		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
			<view class="popup-box" :style="{'--theme-color': themeColor}">
				<view class="popup-header">
					<view class="title">费用疑问</view>
					<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
				</view>
				<view class="popup-content">
					<scroll-view scroll-y class="contetnt-scroll" v-if="showData">
						<view class="content-table">
							<view class="table-thead">
								<view class="table-tr">
									<view class="table-th"></view>
									<view class="table-th">预估费用</view>
									<view class="table-th">实际费用</view>
								</view>
							</view>
							<view class="table-tbody">
								<view class="table-tr" v-if="showData.start_price">
									<view class="table-td">起步价</view>
									<view class="table-td">{{showData.start_price.estimated_amount}}</view>
									<view class="table-td">{{showData.start_price.actual_amount}}</view>
								</view>
								<view class="table-tr" v-if="showData.mileage_fee">
									<view class="table-td">里程费</view>
									<view class="table-td">
										<view class="flex-column">
											<text>{{showData.mileage_fee.estimated.price}}</text>
											<text class="td-sub">{{showData.mileage_fee.estimated.kilometer}}</text>
										</view>
									</view>
									<view class="table-td">
										<view class="flex-column">
											<text>{{showData.mileage_fee.actual.price}}</text>
											<text class="td-sub">{{showData.mileage_fee.actual.kilometer}}</text>
										</view>
									</view>
								</view>
								<view class="table-tr" v-if="showData.duration_fee">
									<view class="table-td">时长费</view>
									<view class="table-td">
										<view class="flex-column">
											<text>{{showData.duration_fee.estimated.price}}</text>
											<text class="td-sub">{{showData.duration_fee.estimated.minute}}</text>
										</view>
									</view>
									<view class="table-td">
										<view class="flex-column">
											<text>{{showData.duration_fee.actual.price}}</text>
											<text class="td-sub">{{showData.duration_fee.actual.minute}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="table-space" v-if="showData.discount_price"></view>
							<view class="table-tbody" v-if="showData.discount_price">
								<view class="table-tr">
									<view class="table-td">优惠卡券</view>
									<view class="table-td"></view>
									<view class="table-td">{{showData.discount_price}}元</view>
								</view>
							</view>
						</view>
						<view class="content-amount flex justify-content-end align-items-center">
							<view class="amount-estimate">预估{{showData.estimated_amount}}元</view>
							<view class="amount-actual">实付<text class="text">{{showData.actual_amount}}</text>元</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentModalCostInquiry",
		props: {
			// 费用疑问
			showData: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		methods: {
			// 打开模态框
			open() {
				this.$refs.popupModal.open()
			},
			// 关闭弹窗
			onClose() {
				this.$refs.popupModal.close()
			},
			// 改变事件
			onChange(e) {
				this.$emit("onChange", e.show)
			},
		},
	}
</script>

<style lang="scss">
	.component-modal-cost-inquiry {
		position: relative;
		z-index: 999;

		.popup-box {
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0 0;
			padding-top: 32rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.popup-header {
				padding: 0 48rpx;
				position: relative;

				.title {
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 48rpx;
					text-align: center;
				}

				.close {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 0;
					right: 48rpx;
				}
			}

			.popup-content {
				padding: 28rpx 32rpx 32rpx;

				.contetnt-scroll {
					overflow: hidden;
					max-height: 60vh;
					min-height: 20vh;

					.content-table {
						display: table;
						width: 100%;
						text-align: center;

						.table-thead {
							display: table-header-group;
							background: #F2F8FF;

							.table-tr {
								display: table-row;

								.table-th {
									display: table-cell;
									color: #242629;
									font-size: 28rpx;
									font-weight: 600;
									line-height: 40rpx;
									padding: 20rpx 16rpx;
								}
							}
						}

						.table-tbody {
							display: table-row-group;
							background: #F7F8FB;
							padding: 16rpx 0;

							.table-tr {
								display: table-row;

								.table-td {
									display: table-cell;
									color: #242629;
									font-size: 28rpx;
									line-height: 40rpx;
									padding: 16rpx;

									.td-sub {
										color: #8D929C;
										font-size: 24rpx;
										line-height: 34rpx;
									}
								}

								&:first-child .table-td {
									padding-top: 32rpx;
								}

								&:last-child .table-td {
									padding-bottom: 32rpx;
								}
							}
						}

						.table-space {
							display: table-row;
							height: 16rpx;
						}
					}

					.content-coupon {
						margin-top: 16rpx;
						background: #F7F8FB;
						padding: 30rpx 64rpx;

						.coupon-title {
							color: #242629;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.coupon-value {
							color: #242629;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}

					.content-amount {
						.amount-estimate {
							margin-top: 44rpx;
							color: #8D929C;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.amount-actual {
							margin-top: 32rpx;
							margin-left: 32rpx;
							color: #242629;
							font-size: 28rpx;
							line-height: 68rpx;

							.text {
								font-size: 48rpx;
								font-weight: 600;
							}
						}
					}
				}
			}

			.popup-btn {
				padding: 16rpx 48rpx;

				.btn {
					color: #FFFFFF;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: center;
					padding: 28rpx;
					border-radius: 48rpx;
					background: var(--theme-color);
				}
			}
		}
	}
</style>